<template>
  <div class="office-add-new">
    <van-notice-bar
      wrapable
      :scrollable="false"
      background="#EDFFEB"
      color="#4ECE40"
      text="本院实行实名制就诊，请如实填写就诊人信息，如因信息错误产生的一切后果自行负责。"
    />
    <van-tabs type="card" v-model="active" color="#4ECE40" background="#EEEEEE" style="margin-top: 15px;margin-bottom: 15px;">
      <van-tab title="成人" name="1"></van-tab>
      <van-tab title="儿童" name="2" ></van-tab>
    </van-tabs>
    <van-form @submit="onSubmit">
      <van-field
        v-model="form.name"
        name="name"
        label="姓名"
        placeholder="姓名"
      />
      <van-field
        style="display:none"
        v-model="form.sex"
        name="username"
        label="性别"
        placeholder="性别"
      />
      <van-cell title="性别" :value="sexLabel" is-link @click="handleShowPopup('sex')" />
      
      <van-field
        style="display:none"
        v-model="form.birthday"
        name="birthday"
        label="出生日期"
        placeholder=""
      />
      <van-cell title="出生日期" is-link :value="birthLabel" @click="handleBirthShowPopup('date')" />
      <van-field
        v-model="form.guardian_name"
        name="guardian_name"
        v-if="active == 2"
        label="监护人姓名"
        placeholder=""
      />
      <van-field
        v-if="active == 1"
        v-model="form.id_number"
        name="id_number"
        :label="`${active == 1 ? '身份证' : '监护人身份证号'}`"
        placeholder=""
      />
      <van-field
        v-if="active == 2"
        v-model="form.guardian_idnumber"
        name="guardian_idnumber"
        :label="`${active == 1 ? '身份证' : '监护人身份证号'}`"
        placeholder=""
      />
      <van-field
        v-if="active == 1"
        v-model="form.tel"
        name="tel"
        :label="`${active == 1 ? '手机号' : '监护人手机号'}`"
        placeholder=""
      />
      <van-field
        v-else
        v-model="form.guardian_tel"
        name="guardian_tel"
        :label="`${active == 1 ? '手机号' : '监护人手机号'}`"
        placeholder=""
      />
      
      <van-cell center title="设为默认就诊人">
        <template #right-icon>
          <van-switch v-model="form.is_default" active-color="#4ECE40" size="24" />
        </template>
      </van-cell>
      <div style="margin: 16px 0; padding: 0 10px">
        <p>我们将根据您的个人真实信息，为您分配新的诊疗卡。为方便您的就诊，请如实填写您的个人信息。</p>
        <div class="add-new">
          <van-button block color="#4ECE40" native-type="submit"
            >修改</van-button
          >
        </div>
      </div>
    </van-form>

    <van-calendar v-model="show" color="#4ECE40" :min-date="minDate" :max-date="maxDate" @confirm="birthConfirm" />
    <van-popup position="bottom" :style="{ height: '50%' }"
    v-model="popupShow">
      <van-picker
        v-if="actType == 'sex'"
        title="标题"
        show-toolbar
        value-key="text"
        :columns="sexArr"
        @confirm="onConfirm"
        @cancel="popupShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import { memberEditServer,memberInfoServer } from '@/service/server';
export default {
  data() {
    return {
      show: false,
      popupShow: false,
      active: "1",
      sexLabel:'',
      birthLabel:'',
      actType: 'sex',
      minDate: new Date(1977, 0, 1),
      maxDate: new Date(),
      sexArr:[{
        value: 0,
        text: '男'
      },{
        value: 1,
        text: '女'
      }
      ],
      form:{
        is_adult: 0,
        name: '',
        birthday: '',
        sex:'',
        id_number: '',
        tel: '',
        guardian_name:'',
        guardian_idnumber: '',
        guardian_tel: '',
        is_default: false
      }
    };
  },
  created(){
    this.queryAddressInfo(this.$route.params.id)
  },
  activated(){
    this.queryAddressInfo(this.$route.params.id)
  },

  methods:{
    async queryAddressInfo(id){
      let result = await memberInfoServer(id);
      if(result.status == 200){
        this.form = result.data
        this.birthLabel = result.data.birthday
        if(result.data.is_adult == 0){
          this.active = '1'
        }else{
          this.active = '2'
        }
        if(result.data.is_default == 1){
          this.form.is_default = true
        }else{
          this.form.is_default = false
        }
        if(result.data.sex == 1){
          this.sexLabel = '女'
        }else{
          this.sexLabel = '男'
        }

      }else{
        this.$toast(result.message)
      }
    },
    handleTabs(e){
      e == 1 ? this.is_adult = 1 : this.is_adult = 0
    },
    async onSubmit(){
      let form = JSON.parse(JSON.stringify(this.form));
      if(this.active == 1){
        delete form.guardian_tel
        delete form.guardian_name
        delete form.guardian_idnumber
      }else{
        delete form.tel
      }
      if(form.is_default){
        form.is_default = 1
      }else{
        form.is_default = 0
      }
      let result = await memberEditServer(form, this.$route.params.id);
      if(result.status == 200){
        this.$toast('修改完成')
        setTimeout(()=>{
          this.$router.go(-1)
        },500)
      }else{
        this.$toast(result.message)
      }
      console.log(form, this.form)
    },
    onConfirm(e){
      console.log(e,'confirm')
      this.sexLabel = e.text
      this.form.sex = e.value
      this.popupShow = false
    },
    birthConfirm(e){
      this.show = false
      this.birthLabel = dayjs(e).format("YYYY-MM-DD");
      this.form.birthday = dayjs(e).format("YYYY-MM-DD");
    },
    handleBirthShowPopup(type){
      this.active = type
      this.show = true
    },
    handleShowPopup(type){
      this.popupShow = true;
      this.actType = type
    }
  }
};
</script>

<style lang="less">
.office-add-new{
  min-height: 100%;
  background: #fff;
  .add-new {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    height: 70px;
    padding: 10px 30px;
  }
.van-tabs__nav--card{
    border-radius: 8px;
    height: 40px;
    border: none!important;
  }
  .van-tabs--card>.van-tabs__wrap{
    height: 40px;
    .van-tab{
      &:first-child{
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
      }
      &:last-child{
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
  }
  .van-tabs__nav--card .van-tab{
    background: #EEEEEE;
    color: #999999;
  }
  .van-tab.van-tab--active{
    color: #fff;
  }
}
</style>